<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {ref, watch} from "vue";
import {addCollect, getArticleDetail, unfavorite} from "@/api/article/http";
import {ElMessage} from "element-plus";

const router = useRouter();
let url = 'http://192.168.5.120:8090'
let route = useRoute();
let articleDatail = ref({})
let flag = localStorage.getItem('studentId')
function getArticle(){
    getArticleDetail(route.query.id).then((res) => {
        if (res.code === 200) {
            articleDatail.value = res.data
            console.log(articleDatail.value)
        }

    })
}
getArticle()

const collect = ()=>{
    if (flag){
        console.log(articleDatail.value.collected)
        if (articleDatail.value.collected){
            unfavorite(articleDatail.value.id).then((res)=>{
                console.log(res)
                getArticle()
            })
        }else {
            const data = {
                articleId: articleDatail.value.id
            }
            addCollect(data).then((res)=>{
                console.log(res)
                getArticle()
            })
        }
    }else {
        ElMessage.error('登录认证过期，请重新登录！')
        router.push({path:'/login'})
    }
}
watch([route], () => {
    console.log('刷新数据')

})
</script>

<template>
    <div class="article-detail-container">
        <section class="article-detail-top">
            <router-link :to="router.options.history.state.back">
                <van-icon name="arrow-left"/>
                <span>详情</span>
            </router-link>
        </section>
        <section class="article-detail-body">
            <p>{{ articleDatail.title }}</p>
            <div class="teacher-info">
                <div class="left-box">
                    <van-image
                        round
                        width="4rem"
                        height="4rem"
                        :src="url + articleDatail.avatar"
                    />
                    <div class="info-box">
                        <div><b>{{articleDatail.author}}</b></div>
                        <div class="send-time">{{articleDatail.sendTime}}</div>
                    </div>
                </div>
                <div class="right" v-if="flag">
                    <van-button v-if="articleDatail.collected" type="primary"  @click="collect">
                        <van-icon name="star" />
                        收藏
                    </van-button>
                    <van-button type="primary" v-else  @click="collect">
                        <van-icon name="star-o" />
                        收藏
                    </van-button>
                </div>
                <div class="right" v-else>
                    <van-button type="primary"  @click="collect">
                        <van-icon name="star-o" />
                        收藏
                    </van-button>
                </div>
            </div>
            <div v-html="articleDatail.content" class="article-content"></div>
        </section>
    </div>
</template>

<style scoped lang="less">
a {
  color: #333333;
}

.article-detail-container {
  background-color: #ffffff;
  min-height: 100vh;
    border:1px solid transparent;

  .article-detail-top {
    position: fixed;
    width: 100%;
    height: 10vw;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
    z-index: 10;
      border-bottom: 1px solid #F6F7F7;
    span {
      margin-left: 10px;
    }
  }
  .article-detail-body {
    padding: 0 15px;
    width: 100%;
    margin-top: 10vw;
    background-color: white;
    overflow: hidden;
      box-sizing: border-box;
      >p {
          margin-top: 12px;
          width: 75%;
          font-size: 18px;
          font-weight: bold;
          color: #222222;
          /* 强制在同一行显示 */
          white-space: nowrap;
          /* 溢出隐藏 */
          overflow: hidden;
          /* 添加省略号 */
          text-overflow: ellipsis;
      }
      .teacher-info {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          .left-box {
              display: flex;
              .info-box {
                  padding: 8px 10px;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  box-sizing: border-box;
                  .send-time{
                      font-size: 3.2vw;
                      color: #A9B4BF;
                  }
              }
          }
          .right-box {

          }
      }
      .article-content {
          padding: 15px 0;
          color: #333333;
      }
  }
}
/deep/.van-button {
    margin-top: 10px;
    width: 78px;
    height:30px
}
</style>